<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="${layout} :: common_header(~{::title})">
    <title th:text="${pageTitle}">PROFILE</title>
</head>

<body th:replace="${layout} :: common_body(~{::div.content-wraper})">


<div class="content-wraper">
    <div class="banner">
        <div class="swiper-container banner-container">
            <div class="swiper-wrapper banner-wrapper">
                <div class="swiper-slide" th:each="item:${banners}">
                    <a href="#" >
                        <img th:src="${item.imgUrl}" th:title="${item.title}" class="banner" alt="banner">
                    </a>
                </div>
            </div>
            <div class="swiper-pagination banner-pagination swiper-pagination-white"></div>
        </div>
    </div>
    <div class="container">
        <div class="company-profile-box">
            <div class="title center" th:text="${pc.title}">
                Company Profile
            </div>
            <div class="desc" th:utext="${pc.content}">
                Guangdong Huayi Yunshang Technology Co., Ltd. (hereinafter referred to as "Huayi Yunshang") is a
                modern enterprise integrating R & D, production, e-commerce, and celebrity brokerage of medical
                devices, woolen products; it was established on February 19, 2019. Affiliated with the New Third
                Board Enterprise Guangdong Huayi Technology Co., Ltd. (stock code: 836963).
                The company has a 100,000-level modern dust-free clean workshop, as well as a procurement,
                production, inspection, warehousing, sales system and high-quality management team that comply with
                medical device industry regulations and standards. There are currently more than 600 employees; the
                production capacity of flat masks exceeds 1.8 million pieces per day, and the production capacity of
                KN95 masks is 1.5 million pieces per day.
                Based on the enterprise spirit of "thrifty, pragmatism, harmony and progress, and pursuit of
                excellence", we adhere to the core values ​​of the enterprise of "honest and trustworthy,
                people-oriented, and win-win cooperation", which has been unanimously affirmed and praised by all
                walks of life.
                Huayi Cloud's "innovation-based, pragmatic operation", to achieve symbiosis, co-creation and win-win
                with the three development stages of "industrialization, platformization, clustering". Build a
                precise industrial chain cluster of production base that combines production, sales, education and
                chain; expand social employment and coordinate with more SMEs to upgrade and transform!
            </div>

        </div>
        <div class="swiper-box pd50">
            <div class="title">
                <div class="center">
                    <span class="font-weight-bold" th:if="${language.equals('en')}">OWN PRODUCTS</span>
                    <span class="font-weight-bold" th:if="${language.equals('zh')}">产品中心</span>
                    <a th:href="${'/'+language+'/'+company+'/products'}" class="more">MORE>></a>
                </div>

            </div>
            <div class="swiper-container-box">
                <div class="swiper-container brand-container">
                    <div class="swiper-wrapper origin">
                        <div class="swiper-slide" th:each="item:${products}">
                            <a th:href="@{'/'+${language}+'/productDetail/'+${item.id}}" target="_blank" class="swiper-item">
                                <img th:src="${item.indexImg}" alt="">
                                <!--                                <div class="swiper-item-label">Name of commodity</div>-->
                            </a>
                        </div>
                    </div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next brand-next"></div>
                    <div class="swiper-button-prev brand-prev"></div>
                </div>

                <!-- Swiper JS -->
            </div>
        </div>
        <div class="swiper-box pd50">
            <div class="title">
                <div class="center"><span class="font-weight-bold" th:if="${language.equals('en')}">PRODUCTION ENVIROMENT</span></div>
                <div class="center"><span class="font-weight-bold" th:if="${language.equals('zh')}">生产环境</span></div>

            </div>
            <div class="swiper-container-box">
                <!-- Swiper -->
                <div class="swiper-container product-swiper" style="height: 700px;">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" th:each="item:${photos1}" th:if="${((itemStat.index % 6) +1) == 1}">

                            <div class="swiper-item-box" >
                                <div class="swiper-item" th:each="i:${#numbers.sequence(0,5)}"  th:if="${(i + itemStat.index  ) < itemStat.size }">
                                    <img  th:src="${photos1[(i + itemStat.index )].url}" class="showPreImg" alt="">
<!--                                    <div class="swiper-item-label">[[${itemStat}]] [[${i + itemStat.index }]]</div>-->
                                </div>
                            </div>

                        </div>
                    </div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next  product-next"></div>
                    <div class="swiper-button-prev  product-prev"></div>
                </div>
                <!-- Swiper JS -->
            </div>
        </div>

        <div class="swiper-box pd50">
            <div class="title">
                <div class="center"><span class="font-weight-bold" th:if="${language.equals('en')}">PRODUCTION QUALIFICATION</span></div>
                <div class="center"><span class="font-weight-bold" th:if="${language.equals('zh')}">企业资质</span></div>

            </div>
            <div class="swiper-container-box">
                <div class="swiper-container qualification-swiper">
                    <div class="swiper-wrapper qualification">
                        <div class="swiper-slide" th:each="item:${photos2}">
                            <div class="swiper-item">
                                <img th:src="${item.url}"  class="showPreImg" alt="">
                                <!--                                <div class="swiper-item-label">Name of commodity</div>-->
                            </div>
                        </div>
                    </div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next qualification-swiper-next"></div>
                    <div class="swiper-button-prev qualification-swiper-prev"></div>
                </div>

                <!-- Swiper JS -->
            </div>
        </div>


    </div>

    <script>
        var slidesPerView
        if ((/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent))) {
            slidesPerView = 1
        } else {
            slidesPerView = 3
        }
        var swiper = new Swiper('.brand-container', {
            clickable: true,
            nextButton: '.brand-next',
            prevButton: '.brand-prev',
            paginationClickable: true,
            slidesPerView: slidesPerView,
            spaceBetween: 20,
            loop:true
        });

        var swiper2 = new Swiper('.product-swiper', {
            clickable: true,
            nextButton: '.product-next',
            prevButton: '.product-prev',
            slidesPerView: 1,
            centeredSlides: true,
            paginationClickable: true,
            loop:true
        });
        var swiper3 = new Swiper('.qualification-swiper', {
            clickable: true,
            nextButton: '.qualification-swiper-next',
            prevButton: '.qualification-swiper-prev',
            paginationClickable: true,
            slidesPerView: slidesPerView,
            spaceBetween: 20,
            loop:true
        });

    </script>
</div>




</body>

</html>